<template>
  <el-drawer v-model="visible" title="历史记录" size="460px" append-to-body lock-scroll>
    <el-space wrap alignment="center" size="small" class="date-picker">
      <el-icon size="20px" class="picker-operate" @click="handlePreDate"><CaretLeft /></el-icon>
      <el-date-picker
        v-model="date"
        type="year"
        value-format="YYYY"
        :clearable="false"
        @change="handlePickerChange"
      />
      <el-icon size="20px" class="picker-operate" @click="handleNextDate"><CaretRight /></el-icon>
    </el-space>
    <el-table :data="list" stripe border>
      <el-table-column label="月份" prop="month"></el-table-column>
      <el-table-column label="总用电/度" prop="totalUsedKwh"></el-table-column>
      <el-table-column label="消费电量/度	" prop="checkInUsedKwh"></el-table-column>
      <el-table-column label="充值金额/元	" prop="rechargeMoney"></el-table-column>
    </el-table>
  </el-drawer>
</template>
<script setup>
import dayjs from 'dayjs'

defineExpose({
  show
})

const visible = ref(false)
const initDate = dayjs().format("YYYY")
const date = ref(initDate)
const total = ref(0)
const list = ref([])

watch(() => visible.value, value => {
  if (value) {
    getList()
  }
})

// previous 上一个
function handlePreDate() {
  let currentDate = dayjs(date.value).add(-1, 'year').format('YYYY')
  date.value = currentDate
  getList()
}
// next 下一个
function handleNextDate() {
  let currentDate = dayjs(date.value).add(1, 'year').format('YYYY')
  date.value = currentDate
  getList()
}

function handlePickerChange(value) {
  getList()
}

/* 获取列表数据 */
function getList() {
  list.value = [
    {
        "totalUsedKwh": 346,
        "month": 1,
        "checkInUsedKwh": 346,
        "rechargeMoney": 350
    },
    {
        "totalUsedKwh": 286.2,
        "month": 2,
        "checkInUsedKwh": 286.2,
        "rechargeMoney": 300
    },
    {
        "totalUsedKwh": 342.7,
        "month": 3,
        "checkInUsedKwh": 342.2,
        "rechargeMoney": 450
    },
    {
        "totalUsedKwh": 347.7,
        "month": 4,
        "checkInUsedKwh": 347.2,
        "rechargeMoney": 600
    },
    {
        "totalUsedKwh": 340.3,
        "month": 5,
        "checkInUsedKwh": 335.2,
        "rechargeMoney": 150
    }
]
}

function show() {
  visible.value = true
}
</script>
<style lang="scss" scoped>
.date-picker {
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
  :deep(.el-date-editor) {
    width: 80px;
    .el-input__wrapper {
      box-shadow: unset;
    }
    .el-input__inner {
      text-align: center;
    }
    .el-input__prefix {
      display: none;
    }
  }
  .picker-operate {
    cursor: pointer;
    color: var(--el-color-primary-light-3);
    transition: color .3s;
    &:hover {
      color: var(--el-color-primary-light-6);
    }
  }
}
</style>